<template>
	<view class="container">
		<view class="search-box">
			<up-search :placeholder="'请输入搜索内容'" searchIcon="/static/solver-home/search/search-icon.png" searchIconSize="24" :searchValue="searchValue" @search="searching" />
		</view>
		<view class="content">
			<view v-if="hasHistory" class="history-box">
				<up-list height="auto">
					<up-list-item v-for="(item, index) in historyList">
						<up-cell :border="false">
							<template #icon>
								<up-icon name="clock" bold></up-icon>
							</template>
							<template #label>
								<u-text color="#333" bold :text="item.name"></u-text>
							</template>
							<template #right-icon>
								<up-icon name="close" bold></up-icon>
							</template>
						</up-cell>
					</up-list-item>
					<up-list-item>
						<view class="more-box">
							<u-text size="14" color="#666" align="center" text="全部历史记录"></u-text>
						</view>
					</up-list-item>
				</up-list>
			</view>
			<view class="recommend-box">
				<u-text color="#000" bold text="大家都在搜"></u-text>
				<view class="tag-box">
					<view class="tag-item-box" v-for="(tagItem, index) in recommendList" :key="`tag_${tagItem.id}_${index}`">
						<up-tag :text="tagItem.name" shape="circle" bgColor="#F5F5F5" borderColor="#F5F5F5" color="#333"></up-tag>
					</view>
				</view>
			</view>
			<view class="empty-box" v-if="isSearch && searchList.length === 0">
				<up-image src="/static/solver-home/search/empty.png" width="200"></up-image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

defineOptions({
	name: 'SolverSearchIndex'
});

// 搜索内容
const searchValue = ref('');

// 是否是搜索状态
const isSearch = ref(false);

// 搜索列表
const searchList = ref([]);

// 是否有历史记录
const hasHistory = ref(true);

//历史记录列表
const historyList = ref([
	{
		id: 0,
		name: '月嫂'
	},
	{
		id: 1,
		name: '钟点工'
	}
]);

// 推荐列表
const recommendList = ref([
	{
		id: 0,
		name: '月嫂'
	},
	{
		id: 1,
		name: '钟点工'
	}
]);

const searching = (val: string) => {
	isSearch.value = true;
	searchValue.value = val;
};
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';
.container {
	width: calc(100% - 20px);
	height: calc(100vh - 20px);
	padding: 10px;
}
.search-box {
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.content {
	height: calc(100% - 50px);

	.recommend-box {
		margin-top: 10px;

		.tag-box {
			width: 100%;
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			gap: 10px;
			.tag-item-box {
				display: inline-block;
			}
		}
	}

	.more-box {
		width: 100%;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #efefef;
	}

	.empty-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
